<template>
  <view class="content">
    <view class="base" v-if="filetype != 3">
      <image
        src="../../static/lighting.png"
        style="
          position: absolute;
          left: 50%;
          transform: translate(-50%, -10%);
          z-index: 2;
        "
      ></image>
    </view>

    <!-- v-if="productDetail" -->
    <block v-if="productDetail">
      <!-- <image
        v-if="productDetail.is_collect == 0"
        class="collect_icon"
        src="../../static/uncollect.png"
        @click="handleProductCollect"
      ></image>
      <image
        v-else
        class="collect_icon"
        src="../../static/collect.png"
        @click="handleProductCollect"
      ></image> -->
      <!-- <view class="title">
        <image
          src="../../static/jiantous.png"
          mode=""
          style="width: 32rpx; height: 32rpx; margin-left: 30rpx; z-index: 999"
          @click="returns()"
        ></image>
      </view> -->
      <view class="goodsImage" v-if="filetype == 1">
        <image
          class="goodsImage_product"
          :src="productDetail.resources_url"
        ></image>
      </view>
      <view
        id="threeView"
        style="
          z-index: 99;
          position: relative;
          display: flex;
          justify-content: center;
        "
      ></view>
      <view :threeall="threeall" :change:threeall="three.all"></view>
      <view
        v-if="filetype == 3"
        style="margin: 70px auto 50px; display: flex; justify-content: center"
        class="videocss"
      >
        <video
          :src="productDetail.resources_url"
          :autoplay="true"
          :loop="true"
          :show-center-play-btn="false"
          object-fi="cover"
          :initial-time="viedotime"
          @ended="endedvideo"
          class="video"
        ></video>
      </view>

      <view class="base" v-if="filetype != 3">
        <image class="base_image" src="../../static/detail_base.png"></image>

        <view class="oliveBranch">
          <image
            class="oliveBranch_image1"
            src="../../static/oliveBranch1.png"
          ></image>

          <view class="oliveBranch_center">
            <view class="oliveBranch_center_first">{{
              productDetail.name
            }}</view>
            <view class="oliveBranch_center_second">
              <view class="oliveBranch_center_limited">限量</view>
              <view class="oliveBranch_center_inStock"
                >{{ productDetail.total_num }}份</view
              >
            </view>
            <!-- <view
              class="oliveBranch_surplus"
              v-if="productDetail.is_show_surplus_num == 1"
              >剩余：{{ productDetail.surplus_num }}</view
            > -->
            <view
              class="oliveBranch_center_second"
              v-if="
                productDetail.is_show_surplus_num == 1 &&
                !is_Coming_soon(productDetail.opening_at)
              "
            >
              <view class="oliveBranch_center_limited">剩余</view>
              <view class="oliveBranch_center_inStock"
                >{{ productDetail.surplus_num }}份</view
              >
            </view>
          </view>

          <image
            class="oliveBranch_image2"
            src="../../static/oliveBranch2.png"
          ></image>
        </view>
      </view>

      <!-- 展示视频时 -->
      <view class="oliveBranch oliveBranch3" v-if="filetype == 3">
        <image
          class="oliveBranch_image1"
          src="../../static/oliveBranch1.png"
        ></image>

        <view class="oliveBranch_center">
          <view class="oliveBranch_center_first">{{ productDetail.name }}</view>
          <view class="oliveBranch_center_group">
            <view class="oliveBranch_center_second">
              <view class="oliveBranch_center_limited">限量</view>
              <view class="oliveBranch_center_inStock"
                >{{ productDetail.total_num }}份</view
              >
            </view>
            <!-- <view
            class="oliveBranch_surplus"
            v-if="productDetail.is_show_surplus_num == 1"
            >剩余：{{ productDetail.surplus_num }}</view
          > -->
            <view
              class="oliveBranch_center_second"
              v-if="
                productDetail.is_show_surplus_num == 1 &&
                !is_Coming_soon(productDetail.opening_at)
              "
            >
              <view class="oliveBranch_center_limited">剩余</view>
              <view class="oliveBranch_center_inStock"
                >{{ productDetail.surplus_num }}份</view
              >
            </view>
          </view>
        </view>

        <image
          class="oliveBranch_image2"
          src="../../static/oliveBranch2.png"
        ></image>
      </view>

      <view
        :class="filetype == 3 ? 'authorWrapper' : ''"
        class="authorWrapper2"
      >
        <view class="author">
          <image
            class="author_image"
            :src="productDetail.creator_avatar"
          ></image>

          <view class="author_content">
            <view class="author_content_first">{{
              productDetail.creator_name
            }}</view>
            <view class="author_content_second"> 创作者 </view>
          </view>

          <view class="author_price"
            >¥ {{ is_entrust ? price_arr[0] : productDetail.price }}</view
          >
        </view>

        <view class="story_richText">
          <view
            class=""
            style="
              height: 2rpx;
              background-color: #262934;
              margin-bottom: 20rpx;
            "
          ></view>
          <uparse :html="productDetail.introduce"></uparse>
          <view
            class=""
            style="height: 2rpx; background-color: #262934; margin-top: 20rpx"
          ></view>
          <view
            class=""
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 30rpx;
              padding-bottom: 30rpx;
            "
          >
            <view class="story_title">发行方</view>
            <view class="story_title2">{{
              productDetail.issuer.nickname
            }}</view>
          </view>
        </view>
      </view>

      <view class="story">
        <!-- <view class="story_title">作品故事</view> -->

        <!-- <image class="story_main" src="../../static/index_bg.png"></image> -->

        <view class="story_bottom">
          <view class="">
            <text class="story_bottom_title">购买须知</text>
          </view>
          <view class="" style="margin: 20rpx 30rpx 0">
            <text
              >1、亿数伽数字文创为虚拟数字文创商品，而非实物，仅限实名认证为年满18周岁的中国大陆用户购买。
              2、亿数伽数字文创品的版权由发行方或原创者拥有，除另行取得版权拥有者书面同意外，用户不得将数字文创品用于任何商业用途。
              3、本商品一经售出，不支持退换，本商品源文件不支持本地下载。
              4、亿数伽数字文创致力于通过数字文创，弘扬数字文化并助力中国文创产业发展，赋能实体经济，为用户带来愉悦的收藏体验。
              5、亿数伽数字文创品非投资或理财产品，不具备任何金融属性，不支持任何炒卖、金融化行为。请勿对亿数伽数字文创品进行炒作、场外交易、欺诈，或以任何其他非法方式进行使用。</text
            >
          </view>
        </view>

        <image
          src="/static/Blockchain.png"
          mode=""
          class="story_bottom_image"
        ></image>
      </view>

      <view class="newFixed">
        <block v-if="is_entrust">
          <view class="newFixed_button" @click="show_deal = true">明细</view>
        </block>

        <block v-else-if="productDetail.type == 1">
          <view
            class="newFixed_button"
            v-if="productDetail.is_have_surplus_num == 0"
            >已售罄</view
          >

          <view
            class="newFixed_button"
            v-else-if="
              userInfo &&
              userInfo.is_frist_buy == 1 &&
              productDetail.first_buy_at &&
              !is_Coming_soon(productDetail.first_buy_at)
            "
            @click="handleClickBuy"
            >购买</view
          >

          <view
            class="newFixed_button"
            v-else-if="is_Coming_soon(productDetail.opening_at)"
          >
            <image
              class="bottom_right_timerIcon"
              src="../../static/index_timer.png"
            ></image>

            <text v-if="!startstate">
              <!-- <text class="bottom_right_sale1">即将开售</text> -->
              <text class="bottom_right_sale2"
                >{{ productDetail.opening_at }} 开售</text
              >
            </text>

            <view v-else>
              <u-count-down
                :timestamp="productDetail.countDown"
                separator="colon"
                separator-color="#ffffff"
                style="margin-left: 8rpx"
                separator-size="28"
                font-size="28"
                @end="getProductDetail()"
                color="#ffffff"
                :show-border="false"
                bg-color="transparent"
              ></u-count-down>
              <text class="bottom_right_sale2">即将开售</text>
            </view>
          </view>

          <view class="newFixed_button" v-else @click="handleClickBuy"
            >购买</view
          >
        </block>

        <block v-else-if="productDetail.type == 2">
          <view
            class="newFixed_button"
            v-if="!is_Coming_soon(productDetail.opening_at)"
            >已结束</view
          >

          <view
            class="newFixed_button"
            v-else-if="
              productDetail.is_reserved_apply == 1 &&
              is_Coming_soon(productDetail.opening_at)
            "
            >已预约</view
          >

          <view class="newFixed_button" v-else @click="handleReservedApply"
            >预约</view
          >
        </block>
        <!-- </view> -->
      </view>

      <view class="bottom">
        <view class="bottom_left">¥ {{ productDetail.price }}</view>

        <block v-if="productDetail.type == 1">
          <view
            v-if="productDetail.is_have_surplus_num == 0"
            class="bottom_buy bottom_buttonGray"
            >已售罄</view
          >

          <view
            v-else-if="
              userInfo &&
              userInfo.is_frist_buy == 1 &&
              productDetail.first_buy_at &&
              !is_Coming_soon(productDetail.first_buy_at)
            "
            class="bottom_buy"
            @click="handlePay"
            >购买</view
          >

          <view
            v-else-if="is_Coming_soon(productDetail.opening_at)"
            class="bottom_right"
          >
            <image
              class="bottom_right_timerIcon"
              src="../../static/index_timer.png"
            ></image>

            <view class="bottom_right_timerText" v-if="!startstate">
              <!-- <text class="bottom_right_sale1">即将开售</text> -->
              <text class="bottom_right_sale2"
                >{{ productDetail.opening_at }} 开售</text
              >
            </view>

            <view class="bottom_right_timerText" v-else>
              <u-count-down
                :timestamp="productDetail.countDown"
                separator="colon"
                separator-color="#F78623"
                style="margin-left: 8rpx"
                separator-size="28"
                font-size="28"
                @end="getProductDetail()"
                color="#F78623"
                :show-border="false"
                bg-color="##000000"
              ></u-count-down>
              <text class="bottom_right_sale2">即将开售</text>
              <!-- <text class="bottom_right_sale2"
				    >{{ productDetail.opening_at }} 开售</text
				  > -->
            </view>
          </view>

          <view v-else class="bottom_buy" @click="handlePay">购买</view>
        </block>

        <block v-else-if="productDetail.type == 2">
          <!-- <view
            class="bottom_right"
            v-if="is_Coming_soon(productDetail.opening_at)"
          >
            <image
              class="bottom_right_timerIcon"
              src="../../static/index_timer.png"
            ></image>

            <view class="bottom_right_timerText">
              <text class="bottom_right_sale2"
                >{{ productDetail.opening_at }} 预约</text
              >
            </view>
          </view>

          <view
            v-else-if="productDetail.is_reserved_apply == 1"
            class="bottom_buy bottom_buttonGray"
            >已预约</view
          >

          <view v-else class="bottom_buy" @click="handleReservedApply"
            >预约</view
          > -->

          <!-- ------------------------------ -->
          <view
            v-if="!is_Coming_soon(productDetail.opening_at)"
            class="bottom_buy bottom_buttonGray"
            >已结束</view
          >

          <view
            v-else-if="
              productDetail.is_reserved_apply == 1 &&
              is_Coming_soon(productDetail.opening_at)
            "
            class="bottom_buy bottom_buttonGray"
            >已预约</view
          >

          <view v-else class="bottom_buy" @click="handleReservedApply"
            >预约</view
          >
        </block>
      </view>

      <u-popup v-model="show" mode="bottom" length="50%" :border-radius="24">
        <view class="popup_box">
          <view class="popup_box_title">支付金额</view>
          <view class="popup_box_price">¥ {{ productDetail.price }}</view>
          <view class="popup_box_title2">请选择支付方式</view>

          <!-- 支付宝 -->
          <view
            class="popup_box_paytype"
            v-if="false"
            @click="handleCheckPayType(0)"
          >
            <view class="popup_box_paytype_left">
              <image
                class="popup_box_paytype_icon"
                src="../../static/zhiFuBao.png"
              ></image>
              <view class="popup_box_paytype_type">支付宝</view>
            </view>

            <image
              v-if="payTypeChecked == 0"
              class="popup_box_paytype_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="popup_box_paytype_checked"
              src="../../static/unchecked.png"
            ></image>
          </view>

          <!-- 微信 -->
          <view class="popup_box_paytype" @click="handleCheckPayType(1)">
            <view class="popup_box_paytype_left">
              <image
                class="popup_box_paytype_icon"
                src="../../static/wechat.png"
              ></image>
              <view class="popup_box_paytype_type">微信</view>
            </view>

            <image
              v-if="payTypeChecked == 1"
              class="popup_box_paytype_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="popup_box_paytype_checked"
              src="../../static/unchecked.png"
            ></image>
          </view>

          <!-- 首信易 -->
          <view class="popup_box_paytype" @click="handleCheckPayType(0)">
            <view class="popup_box_paytype_left">
              <image
                class="popup_box_paytype_icon"
                src="../../static/wechat.png"
              ></image>
              <view class="popup_box_paytype_type">首信易</view>
            </view>

            <image
              v-if="payTypeChecked == 0"
              class="popup_box_paytype_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="popup_box_paytype_checked"
              src="../../static/unchecked.png"
            ></image>
          </view>

          <view class="popup_box_button" @click="handlePayImmediately"
            >立即购买</view
          >
        </view>
      </u-popup>

      <u-popup
        v-model="linestate"
        mode="center"
        width="470rpx"
        height="520rpx"
        :border-radius="24"
        :closeable="true"
        :mask-close-able="false"
        @close="close"
      >
        <view class="linecss">
          <image src="../../static/loading.png" class="loadingimg"></image>
          <view class="">
            <image
              src="../../static/line_up.png"
              style="width: 140rpx; height: 140rpx"
              class="ctnterimg"
            ></image>
            <text class="ctntertext">正在排队购买中…</text>
          </view>
        </view>
      </u-popup>
    </block>

    <!-- <u-popup
      v-model="marketlsit"
      mode="bottom"
      border-radius="48"
      height="600px"
      :custom-style="customStyle"
    >
      <view class="markebottom">
        <view class="tabs">
          <u-tabs
            :list="list"
            :is-scroll="false"
            :current="current"
            @change="marketChange"
            bg-color="transparent"
            active-color="#1FE7E7"
            inactive-color="#ffffff"
          ></u-tabs>
          <image
            :src="price_img"
            class="price"
            @click="handle_price_sort"
          ></image>
        </view>
        <scroll-view
          class="markelist"
          scroll-y
          :style="{ height: 1000 + 'rpx' }"
          lower-threshold="60"
          @scrolltolower="onreachBottom"
          :scroll-top="scrollTop"
        >
          <view class="markelist">
            <view v-for="(item, index) in shoplist" :key="index">
              <view class="markelist_detail">
                <view class="markelist_detail_left">
                  <view class="markelist_detail_no">
                    <text>商品编码:</text>
                    <text>{{ item.no }}</text>
                  </view>
                  <view class="markelist_detail_user">
                    <image class="author_image" :src="item.avatar"></image>
                    <text>{{ item.nickname }}</text>
                  </view>
                </view>
                <view class="markelist_detail_right">
                  <text class="markelist_detail_price">￥{{ item.price }}</text>
                  <view class="markebuy" @click="markebuy(item.id)">购买</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup> -->

    <!-- 成交明细 -->
    <u-popup
      v-if="productDetail"
      v-model="show_deal"
      mode="bottom"
      border-radius="48"
      height="1116rpx"
      :custom-style="customStyle"
    >
      <view class="deal">
        <view class="tabs">
          <u-tabs
            :list="category_tabs"
            :is-scroll="false"
            :current="deal_current"
            @change="dealChange"
            bg-color="transparent"
            active-color="#1FE7E7"
            inactive-color="#ffffff"
            bar-height="6"
            bar-width="64"
          ></u-tabs>
        </view>

        <scroll-view
          v-if="entrustList.length != 0"
          class=""
          scroll-y
          lower-threshold="60"
          @scrolltolower="dealOnreachBottom"
          :scroll-top="scrollTop"
          :style="{ height: 846 + 'rpx' }"
        >
          <view class="detailed">
            <view
              class="detailed_item"
              v-for="item in entrustList"
              @click="
                handleClickEntrustItem(
                  item.id,
                  item.type,
                  item.entrusted_num,
                  item.entrusted_price
                )
              "
            >
              <view class="detailed_item_column">{{ item.created_at }}</view>
              <view
                class="detailed_item_column"
                :class="item.type == 'buy' ? 'buyStyle' : 'sellStyle'"
              >
                <text>¥{{ item.entrusted_price }}</text>
                <!-- <image
                  v-if="item.type == 'buy'"
                  class="detailed_item_icon"
                  src="../../static/arrow_up.png"
                ></image>
                <image
                  v-else
                  class="detailed_item_icon"
                  src="../../static/arrow_down.png"
                ></image> -->
              </view>
              <view class="detailed_item_column">
                <text v-if="deal_current == 0">{{ item.transaction_num }}</text>
                <text v-else>{{ item.entrusted_num }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <view v-else :style="{ height: 846 + 'rpx', 'padding-top': '2rpx' }">
          <empty :show="entrustList.length == 0"></empty>
        </view>

        <!-- <view class="deal_bottom">
          <view class="deal_button">撤/持</view>
        </view> -->

        <view class="deal_bottom">
          <!-- <view class="deal_button color1" @click="handleShowPurchase"
            >买入</view
          > -->
          <view class="deal_button color2" @click="handleShowSellOut"
            >卖出</view
          >
          <view class="deal_button color3" @click="handleShowOperation"
            >撤/持</view
          >
        </view>
      </view>
    </u-popup>

    <!-- purchase 买入 -->
    <u-popup
      v-if="productDetail"
      v-model="show_purchase"
      mode="bottom"
      border-radius="48"
      height="882rpx"
      :custom-style="customStyle"
    >
      <view class="purchase">
        <view class="purchase_title">{{ productDetail.name }}</view>
        <view class="purchase_balance">
          <!-- <image
            class="purchase_balance_icon"
            src="../../static/purchase_balance.png"
          ></image> -->
          <!-- <text
            >账户余额：<text class="highlight">¥{{ balancenow }}</text></text
          > -->
          <!-- <text
            >账户余额：<text class="highlight"
              >¥{{ now_purchase_payment == 0 ? balancenow : smallChange }}</text
            ></text
          > -->
        </view>

        <template v-if="is_auto_purchase">
          <view class="purchase_number">
            <view class="addSub">
              <view
                class="addSub_left"
                @click="handlePurchaseSub('purchase_price')"
              >
                <image
                  class="addSub_icon"
                  src="../../static/addSub_sub_red.png"
                ></image>
              </view>
              <view class="addSub_center">
                <input
                  class="addSub_center_input"
                  placeholder="买入价格"
                  v-model="purchase_price"
                  type="number"
                  placeholder-style="font-size: 28rpx;"
                  @blur="priceBlur('purchase_price')"
                />
              </view>
              <view
                class="addSub_right"
                @click="handlePurchaseAdd('purchase_price')"
              >
                <image
                  class="addSub_icon"
                  src="../../static/addSub_add_red.png"
                ></image>
              </view>
            </view>

            <view class="addSub">
              <view
                class="addSub_left"
                @click="handlePurchaseSub('purchase_num')"
              >
                <image
                  class="addSub_icon"
                  src="../../static/addSub_sub_red.png"
                ></image>
              </view>
              <view class="addSub_center">
                <input
                  class="addSub_center_input"
                  placeholder="买入量"
                  v-model="purchase_num"
                  type="number"
                  placeholder-style="font-size: 28rpx;"
                  @blur="buy_num_blur"
                />
              </view>
              <view
                class="addSub_right"
                @click="handlePurchaseAdd('purchase_num')"
              >
                <image
                  class="addSub_icon"
                  src="../../static/addSub_add_red.png"
                ></image>
              </view>
            </view>
          </view>

          <view class="purchase_data">
            <view class="DeclineUp">
              <view class="DeclineUp_text">跌停</view>
              <view class="DeclineUp_num green">{{
                is_constant_price ? price_arr[0] : price_arr[2]
              }}</view>
              <image
                class="DeclineUp_icon"
                src="../../static/arrow_down.png"
              ></image>
            </view>

            <view class="DeclineUp">
              <view class="DeclineUp_text">涨停</view>
              <view class="DeclineUp_num red">
                {{ is_constant_price ? price_arr[0] : price_arr[1] }}
              </view>
              <image
                class="DeclineUp_icon"
                src="../../static/arrow_up.png"
              ></image>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="purchase_number">
            <view class="addSub">
              <view
                class="addSub_left"
                @click="handleSub('now_click_entrust_num')"
              >
                <image
                  class="addSub_icon"
                  src="../../static/addSub_sub_red.png"
                ></image>
              </view>
              <view class="addSub_center">
                <input
                  class="addSub_center_input"
                  placeholder="买入量"
                  v-model="now_click_entrust_num"
                  type="number"
                  placeholder-style="font-size: 28rpx;"
                  disabled
                />
              </view>
              <view
                class="addSub_right"
                @click="handleAdd('now_click_entrust_num')"
              >
                <image
                  class="addSub_icon"
                  src="../../static/addSub_add_red.png"
                ></image>
              </view>
            </view>
          </view>

          <view class="purchase_priceBlock">
            <text class="purchase_priceBlock_text1">共计：</text>
            <text class="purchase_priceBlock_text2"
              >¥{{ now_click_entrust_price }}</text
            >
          </view>
        </template>

        <view class="purchase_payment">
          <view
            v-if="OpenPayTypeArr.indexOf('1') != -1"
            class="purchase_payment_item"
            @click="handlePurchasePayment(0)"
          >
            <image
              class="purchase_payment_icon"
              src="../../static/cashWallet_pay.png"
            ></image>
            <view class="purchase_payment_text">现金支付</view>
            <image
              v-if="now_purchase_payment == 0"
              class="purchase_payment_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="purchase_payment_checked"
              src="../../static/unchecked.png"
            ></image>
          </view>

          <view
            v-if="OpenPayTypeArr.indexOf('14') != -1"
            class="purchase_payment_item"
            @click="handlePurchasePayment(1)"
          >
            <image
              class="purchase_payment_icon"
              src="../../static/coinWallet_pay.png"
            ></image>
            <view class="purchase_payment_text">零钱支付</view>
            <image
              v-if="now_purchase_payment == 1"
              class="purchase_payment_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="purchase_payment_checked"
              src="../../static/unchecked.png"
            ></image>
          </view>

          <view
            v-if="OpenPayTypeArr.indexOf('15') != -1"
            class="purchase_payment_item"
            @click="handlePurchasePayment(2)"
          >
            <image
              class="purchase_payment_icon"
              src="../../static/shande_logo.jpg"
            ></image>
            <view class="purchase_payment_text">杉德钱包支付</view>
            <image
              v-if="now_purchase_payment == 2"
              class="purchase_payment_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="purchase_payment_checked"
              src="../../static/unchecked.png"
            ></image>
          </view>
        </view>

        <view class="purchase_bottom">
          <!-- 自动匹配 -->
          <!-- <view
            class="purchase_button"
            @click="$u.debounce(() => handleEntrustCommit('buy'), 1000, true)"
            >买入</view
          > -->

          <!-- 手动撮合 -->
          <view
            class="purchase_button"
            @click="$u.debounce(() => handleMatchMaking(), 1000, true)"
            >买入</view
          >
        </view>
      </view>
    </u-popup>

    <!-- sellOut 卖出 -->
    <u-popup
      v-if="productDetail"
      v-model="show_sellOut"
      mode="bottom"
      border-radius="48"
      height="898rpx"
      :custom-style="customStyle"
    >
      <view class="purchase">
        <view class="purchase_title">{{ productDetail.name }}</view>
        <view class="purchase_balance">
          <!-- <image
            class="purchase_balance_icon"
            src="../../static/purchase_balance.png"
          ></image>
          <text
            >账户余额：<text class="highlight">¥{{ balancenow }}</text></text
          > -->
        </view>

        <view class="purchase_number">
          <view class="addSub sellOut_border">
            <view
              class="addSub_left bg2"
              @click="handlePurchaseSub('sellOut_price')"
            >
              <image
                class="addSub_icon"
                src="../../static/addSub_sub_blue.png"
              ></image>
            </view>
            <view class="addSub_center sellOut_center">
              <input
                class="addSub_center_input"
                placeholder="卖出价格"
                v-model="sellOut_price"
                type="number"
                placeholder-style="font-size: 28rpx;"
                @blur="priceBlur('sellOut_price')"
              />
            </view>
            <view
              class="addSub_right bg2"
              @click="handlePurchaseAdd('sellOut_price')"
            >
              <image
                class="addSub_icon"
                src="../../static/addSub_add_blue.png"
              ></image>
            </view>
          </view>

          <view class="addSub sellOut_border">
            <view
              class="addSub_left bg2"
              @click="handlePurchaseSub('sellOut_num')"
            >
              <image
                class="addSub_icon"
                src="../../static/addSub_sub_blue.png"
              ></image>
            </view>
            <view class="addSub_center sellOut_center">
              <input
                class="addSub_center_input"
                placeholder="卖出量"
                v-model="sellOut_num"
                type="number"
                placeholder-style="font-size: 28rpx;"
                @blur="buy_num_blur"
              />
            </view>
            <view
              class="addSub_right bg2"
              @click="handlePurchaseAdd('sellOut_num')"
            >
              <image
                class="addSub_icon"
                src="../../static/addSub_add_blue.png"
              ></image>
            </view>
          </view>
        </view>

        <view class="purchase_data purchase_data-sellOut">
          <view class="DeclineUp">
            <view class="DeclineUp_text">跌停</view>
            <view class="DeclineUp_num green">{{
              is_constant_price ? price_arr[0] : price_arr[2]
            }}</view>
            <image
              class="DeclineUp_icon"
              src="../../static/arrow_down.png"
            ></image>
          </view>

          <view class="DeclineUp">
            <view class="DeclineUp_text">涨停</view>
            <view class="DeclineUp_num red">{{
              is_constant_price ? price_arr[0] : price_arr[1]
            }}</view>
            <image
              class="DeclineUp_icon"
              src="../../static/arrow_up.png"
            ></image>
          </view>
        </view>

        <view class="merchant">
          <view class="merchant_title">
            <view>请选择挂售商家</view>
            <view
              class="merchant_title_right"
              v-if="MerchantSelect"
              @click="handleSelect"
            >
              换一家
              <image
                class="merchant_title_icon"
                src="../../static/arrow_right_qin.png"
              ></image
            ></view>
          </view>

          <view class="select" v-if="!MerchantSelect" @click="handleSelect">
            <view>去选择挂售商家</view>
            <image
              class="select_icon"
              src="../../static/arrow_right_qin.png"
            ></image>
          </view>
          <view class="selected" v-else>
            <image
              class="selected_icon"
              :src="JSON.parse(MerchantSelect.logo)[0]"
            ></image>
            <view class="selected_content">
              <view class="selected_content_row1">{{
                MerchantSelect.name
              }}</view>
              <!-- <view class="selected_content_row2"
                >手续费：{{
                  (MerchantSelect.commission_rate * 100).toFixed(2)
                }}%</view
              >
            </view> -->
            <view class="selected_content_row2">手续费：10%</view>
            </view>
          </view>
        </view>

        <view class="purchase_bottom">
          <view
            class="purchase_button"
            @click="$u.debounce(() => handleEntrustCommit('sell'), 1000, true)"
            >卖出</view
          >
        </view>
      </view>
    </u-popup>

    <!-- 撤单 -->
    <u-popup
      v-if="productDetail"
      v-model="show_operation"
      mode="bottom"
      border-radius="48"
      height="688rpx"
      :custom-style="customStyle"
    >
      <view class="operation">
        <view class="operation_title">{{ productDetail.name }}</view>
        <view class="operation_tabs">
          <view
            v-for="(item, index) in tabs_list"
            class="operation_tabs_item"
            :class="`operation_tabs_item${index + 1}`"
            :key="item"
            >{{ item }}</view
          >
        </view>

        <scroll-view
          class=""
          scroll-y
          lower-threshold="60"
          @scrolltolower="operationOnreachBottom"
          :scroll-top="scrollTop"
          :style="{ height: 464 + 'rpx', width: '750rpx', margin: '0 -40rpx' }"
        >
          <!-- height 304 / 464 -->
          <view
            class="operation_tabs row"
            v-for="item in userEntrustList"
            @click="handleShowRevoke(item)"
          >
            <view class="operation_tabs_item1 row_item row_item1">
              {{ item.created_at.slice(0, 10) }}
            </view>
            <view class="operation_tabs_item2 row_item row_item2"
              >{{ item.entrusted_price }}/{{
                item.max_transaction_price
                  ? item.max_transaction_price
                  : item.entrusted_price
              }}</view
            >
            <view class="operation_tabs_item3 row_item row_item3"
              >{{ item.entrusted_num }}/{{ item.transaction_num }}</view
            >
            <view
              class="operation_tabs_item4 row_item row_item4"
              :class="item.type == 'buy' ? 'color1' : 'color2'"
              >{{ item.type == "buy" ? "买入" : "卖出" }}</view
            >
          </view>
        </scroll-view>

        <!-- <view class="operation_bottom">
          <view class="operation_button color1">买入</view>
          <view class="operation_button color2">卖出</view>
          <view class="operation_button color3">撤/持</view>
        </view> -->

        <!-- <view class="operation_bottom">
          <view class="operation_button">撤/持</view>
        </view> -->
      </view>
    </u-popup>

    <!-- 撤单确认 -->
    <view class="cover_bg" v-if="show_revoke"></view>
    <view class="revoke" v-if="show_revoke">
      <view class="revoke_row1"> 撤单确认 </view>

      <view class="revoke_row2">
        <view class="revoke_row2_title">交替类型</view>
        <view
          class="revoke_row2_value"
          :class="now_revoke.type == 'buy' ? 'color1' : 'color2'"
          >{{ now_revoke.type == "buy" ? "买入" : "卖出" }}</view
        >
      </view>

      <view class="revoke_row2">
        <view class="revoke_row2_title">撤单藏品</view>
        <view class="revoke_row2_value">{{ productDetail.name }}</view>
      </view>

      <view class="revoke_row2">
        <view class="revoke_row2_title">委托价格</view>
        <view class="revoke_row2_value">¥{{ now_revoke.entrusted_price }}</view>
      </view>

      <view class="revoke_row2">
        <view class="revoke_row2_title">委托数量</view>
        <view class="revoke_row2_value">{{ now_revoke.entrusted_num }}</view>
      </view>

      <view class="revoke_bottom">
        <view class="revoke_bottom_item1" @click="revokeCancel">取消</view>
        <view
          class="revoke_bottom_item2"
          @click="$u.debounce(revokeConfirm, 1000, true)"
          >撤单</view
        >
      </view>
    </view>

    <iframe
      :src="weburl"
      v-if="showstate"
      :style="{ height: widHeigh + 'px' }"
      class="webView"
    ></iframe>

    <u-modal
      v-model="show_certification"
      :content="certification_content"
      @confirm="certification_confirm"
      @cancel="certification_cancel"
      :show-cancel-button="true"
    ></u-modal>

    <view class="cover_bg" v-if="show_notice"></view>
    <view class="notice" v-if="show_notice">
      <view class="notice_row1"> 购买数量 </view>
      <view class="notice_row2">
        <image
          class="notice_icon"
          src="../../static/reduce_one.png"
          @click="reduce_one"
        ></image>
        <!-- <view class="notice_row2_text">{{ buy_num }}</view> -->
        <input
          class="notice_row2_input"
          placeholder=""
          v-model="buy_num"
          type="number"
          placeholder-style="font-size: 28rpx;"
          @blur="buy_num_blur"
        />
        <image
          class="notice_icon"
          src="../../static/add_one.png"
          @click="add_one"
        ></image>
      </view>
      <view class="notice_row3">
        <text v-if="buy_num > Number(productDetail.max_buy_num_limit)"
          >超出购买限制！</text
        >
        <text v-if="!buy_num || buy_num <= 0">购买数量无效！</text>
      </view>
      <view class="notice_bottom">
        <view class="notice_bottom_item1" @click="noticeCancel">取消</view>
        <view class="notice_bottom_item2" @click="noticeConfirm">确定</view>
      </view>
    </view>

    <view class="cover_bg" v-if="show_to_shande_account"></view>
    <view class="notice" v-if="show_to_shande_account">
      <view class="notice_row1"> 请先开通杉德钱包 </view>
      <view class="notice_bottom">
        <view class="notice_bottom_item2 shande" @click="shandeAccountConfirm"
          >前往开通</view
        >
        <view class="notice_bottom_item1 shande" @click="shandeAccountCancel"
          >取消</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import moment from "moment";
import { isLogin } from "@/utils/auth.js";
import { socket_url } from "@/utils/request.js";
import { getTimeleft } from "@/utils/timeleft.js";

export default {
  data() {
    return {
      show: false,
      payTypeChecked: 1, //暂时固定为微信支付
      productDetail: null,
      product_id: "",
      collect: false,
      order_no: "",

      userInfo: null,
      time: null,
      IPaddress: "",
      lineupId: "",
      linestate: false,
      WebSocketID: "",
      startstate: false,
      filetype: 1, //1图片,2模型 //3视频
      imgwidth: 0,
      imgheight: 0,
      productDetail_url: null,
      threeall: {
        width: "",
        productDetail_url: "",
        is_picture: false,
        picture_cover: "",
        is_shanghu: uni.getStorageSync("unique_code"),
        shanghu_bg: "",
      },
      viedotime: 0,
      whitelist: 0,
      // 阿里滑块验证码
      session_id: "",
      sig: "",
      token: "",
      showstate: false,
      widHeigh: "",
      weburl: "/hybrid/html/Webpage.html",
      show_certification: false,
      certification_content: "请先实名认证",
      customStyle: {
        background: "transparent",
      },

      //二级市场
      marketstate: false,
      marketlsit: false,
      list: [
        {
          name: "默认排序",
        },
        {
          name: "最新上架",
        },
        {
          name: "价格排序",
        },
      ],
      current: 0,
      price_img: "/static/price.png",
      price_id: 0,
      shoplist: [],
      detailprice: null,
      is_market: false,

      scrollTop: 0,

      show_notice: false,
      buy_num: 1,

      // 买入卖出交易
      show_deal: false,
      deal_current: 0,
      category_tabs: [
        {
          name: "成交明细",
        },
        // {
        //   name: "买单",
        // },
        {
          name: "卖单",
        },
      ],
      show_purchase: false,
      show_sellOut: false,
      show_operation: false,
      show_revoke: false,
      MerchantSelect: null,
      tabs_list: ["时间", "委托价/成交价", "委托/成交量", "业务"],
      is_entrust: false, //是否是委托
      entrust_type: "", //buy：买入 ，sell：卖出
      entrustList: [],
      purchase_price: "",
      purchase_num: "",
      balancenow: 0, //现金余额
      smallChange: 0, //零钱余额
      entrust_log_page: 1,
      entrust_log_limit: 10,
      user_entrust_log_page: 1,
      user_entrust_log_limit: 10,
      userEntrustList: [],
      now_revoke: null,
      sellOut_price: "",
      sellOut_num: "",
      price_arr: [],
      is_constant_price: false,
      is_to_select_merchant: false,
      now_purchase_payment: 0,
      OpenPayTypeArr: [],

      shande_wallet_url: "",
      show_to_shande_account: false,

      // 手动撮合
      now_click_entrust_num: 0,
      click_entrust_max: 0,
      // now_click_entrust_price: 0,
      single_entrust_price: 0,
      is_auto_purchase: false, //是否自动匹配，false为手动
    };
  },
  onLoad(options) {
    this.product_id = options.product_id;
    this.marketstate = options.market;
    this.detailprice = options.price;
    this.userInfo = uni.getStorageSync("userInfo");

    if (options.market) {
      this.marketlsit = true;
      this.is_market = true;
    }

    if (options.entrust) {
      this.is_entrust = true;
    }
  },
  onShow() {
    this.getImage();
    this.getWalletUrl();
    this.MerchantSelect = uni.getStorageSync("MerchantSelect");
    if (this.is_to_select_merchant) {
      this.is_to_select_merchant = false;
      return;
    }
    this.getProductDetail();
    this.getUserInfo();
    this.IPaddress = uni.getStorageSync("ipAddress");

    if (this.marketstate) {
      this.current = 0;
      this.price_id = 0;
      this.price_img = "/static/price.png";
      this.buyshopList("", "", true);
    }

    if (this.is_entrust) {
      this.getOpenPayType();
      this.getuserWallet();
      this.getEntrustList(true);
      this.getUserEntrustLog(true);
    }
  },
  onReady() {
    // #ifdef H5
    window.addEventListener("message", this.captchaListenerHandeler);
    // #endif
    // #ifdef APP-PLUS
    // plus.globalEvent.addEventListener('plusMessage', this.captchaListenerHandeler);
    // #endif
  },
  onUnload() {
    uni.removeStorageSync("MerchantSelect");

    clearInterval(this.time);
    // #ifdef H5
    window.removeEventListener("message", this.captchaListenerHandeler);
    // #endif
    // #ifdef APP-PLUS
    // #endif
  },
  onInit() {},
  computed: {
    endedvideo() {
      console.log(this.viedotime, "this.viedotime ");
      this.viedotime = 1;
    },

    // 传入时间 和 当前时间对比，返回true表示传入时间 比 当前更晚, 表示未开售
    is_Coming_soon() {
      return (time) => {
        return moment(time).diff(moment(), "second") > 0;
      };
    },

    // 手动撮合合计
    now_click_entrust_price() {
      return (+this.now_click_entrust_num * +this.single_entrust_price).toFixed(
        2
      );
    },
  },
  watch: {
    show_purchase(value) {
      value ? "" : (this.show_deal = true);
    },
    show_sellOut(value) {
      value ? "" : (this.show_deal = true);
    },
    show_operation(value) {
      if (value) this.getUserEntrustLog(true);
      value ? "" : (this.show_deal = true);
    },
  },
  methods: {
    async getImage() {
      if (!this.threeall.is_shanghu) {
        return;
      }
      let res = await api.getImage({
        method: "get",
        query: {},
      });

      if (res.code === 0) {
        this.threeall.shanghu_bg = res.data.url;
      } else {
        tip.defaults(res.msg);
      }
    },
    async getuserWallet() {
      let res = await api.userWallet({
        method: "get",
        query: {},
      });

      if (res.code === 0) {
        // this.balancenow = res.data.balance;
        this.balancenow = (
          Number(res.data.balance) - Number(res.data.lock_balance)
        ).toFixed(2);
        this.smallChange = res.data.lock_balance;
      } else {
        tip.defaults(res.msg);
      }
    },
    handleClickBuy() {
      if (!this.userInfo) {
        tip.defaults("请先登录");
        return;
      }
      if (!this.is_market) {
        if (!this.userInfo.sd_wallet_user_no) {
          this.show_to_shande_account = true;
          return;
        }
        this.show_notice = true;
      } else {
        this.handlePay();
      }
    },
    buy_num_blur() {
      // console.log("失去焦点");
    },
    add_one() {
      if (this.buy_num >= Number(this.productDetail.max_buy_num_limit)) return;
      this.buy_num++;
    },
    reduce_one() {
      if (this.buy_num <= 1) return;
      this.buy_num--;
    },
    noticeCancel() {
      this.buy_num = 1;
      this.show_notice = false;
    },
    noticeConfirm() {
      if (!this.buy_num || this.buy_num <= 0) {
        return;
      }
      if (this.buy_num > Number(this.productDetail.max_buy_num_limit)) {
        return;
      }
      this.show_notice = false;
      this.handlePay();
    },
    shandeAccountCancel() {
      this.show_to_shande_account = false;
      this.show_notice = true;
    },
    shandeAccountConfirm() {
      // #ifdef H5
      if (this.shande_wallet_url) {
        window.location.href = this.shande_wallet_url;
      }
      // #endif

      // #ifdef APP-PLUS
      if (this.shande_wallet_url) {
        plus.runtime.openURL(this.shande_wallet_url);
      }
      // #endif
    },
    onreachBottom() {
      this.marketPage++;
      if (this.current == 0) {
        this.$u.throttle(this.buyshopList("", "", false), 1000, true);
      } else if (this.current == 1) {
        this.$u.throttle(this.buyshopList("", 1, false), 1000, true);
      } else if (this.current == 2) {
        var price_sort = 1;
        this.price_id == 2 ? (price_sort = 1) : (price_sort = 2);
        this.$u.throttle(this.buyshopList(price_sort, "", false), 1000, true);
      }
    },
    dealOnreachBottom() {
      this.entrust_log_page++;
      this.$u.throttle(this.getEntrustList(), 1000, true);
    },
    operationOnreachBottom() {
      this.user_entrust_log_page++;
      this.$u.throttle(this.getUserEntrustLog(), 1000, true);
    },
    async buyshopList(price_sort, newest, refresh) {
      if (refresh) {
        this.marketPage = 1;
      }
      let res = await api.buyList({
        method: "POST",
        query: {
          product_id: this.product_id,
          newest: newest,
          price_sort: price_sort,
          page: this.marketPage,
        },
        loading: "加载中",
      });

      if (res.code == 0) {
        if (this.marketPage == 1) {
          this.shoplist = res.data;
        } else {
          this.shoplist = this.shoplist.concat(res.data);
        }
      }
    },
    captchaListenerHandeler(e) {
      // #ifdef H5
      const result = e.data;
      // #endif
      // #ifdef APP-PLUS
      const result = e.data.args.data.arg;
      // #endif
      if (result && result.pagestate) {
        this.showstate = false;
        this.session_id = result.sessionId;
        this.sig = result.sig;
        this.token = result.token;
        this.handleCreateOrder();
      }
    },
    appCreateVerify() {
      // 阿里云验证码 App打开本地verify页面（uni-app本地html存放在根目录/hybrid/html中）
      let wv = plus.webview.create("", "custom-webview", {
        "uni-app": "none",
        background: "transparent",
        webviewBGTransparent: true,
      });
      wv.loadURL("/hybrid/html/create_webview_sub.html");
      wv.overrideUrlLoading({ mode: "reject", match: ".*" }, (e) => {
        this.token = e.url.split("push?token=")[1].split("&sig=")[0];
        this.sig = e.url.split("&sig=")[1].split("$sessionId=")[0];
        this.session_id = e.url.split("$sessionId=")[1];
        this.handleCreateOrder();
      });
      const currentWebview = this.$scope.$getAppWebview();
      currentWebview.append(wv);
    },
    videoErrorCallback(e) {
      console.log(e, "eeee");
    },
    returns() {
      let canNavBack = getCurrentPages();
      if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        history.back();
      }
    },
    //关闭排队
    close() {
      clearInterval(this.time);
      console.log("关闭排队");
    },
    async getUserInfo() {
      let res = await api.info({
        method: "get",
        query: {},
      });
      if (res.code === 0) {
        this.userInfo = res.data;
        console.log(
          this.userInfo.total_first_buy_num,
          "this.userInfothis.userInfo"
        );
      } else {
        // tip.defaults(res.msg);
      }
    },

    async getProductDetail() {
      let res = await api.productDetail({
        method: "get",
        query: {
          id: this.product_id,
        },
      });
      if (res.code === 0) {
        this.productDetail = res.data;
        this.price_arr = res.data.price_arr;
        this.is_constant_price = this.price_arr.every(
          (x) => x == res.data.price_arr[0]
        );
        if (this.is_constant_price) {
          this.purchase_price = res.data.price_arr[0];
          this.sellOut_price = res.data.price_arr[0];
        } else {
          this.purchase_price = res.data.price_arr[2];
          this.sellOut_price = res.data.price_arr[2];
        }

        // var img = new Image();
        // img.src = this.productDetail.resources_url;
        // img.onload = function(){
        //     this.imgwidth = img.width
        //     this.imgheight = img.height
        // }

        // let that = this
        // let info = uni.createSelectorQuery().select(".goodsImage_border");
        // info.boundingClientRect(function(data) { //data - 各种参数
        //     console.log(data) // 获取元素的相关信息
        //   if (data.height > 210) {
        //     that.domWidth = '730rpx'
        //   } else {
        //     that.domWidth = '520rpx'
        //   }
        // }).exec()
        // this.$forceUpdate()

        if (
          ["png", "jpg", "jpeg", "gif"].indexOf(
            this.productDetail.resources_url.split(".").pop()
          ) != -1
        ) {
          this.threeall.picture_cover = this.productDetail.resources_url;
          this.productDetail.resources_url =
            "https://img.metatmt.com/model/template.gltf";
          this.threeall.is_picture = true;
        }

        if (this.productDetail.resources_url.split(".").pop() == "gltf") {
          // this.productDetail_url = this.productDetail.resources_url
          this.filetype = 2;

          uni.getSystemInfo({
            success: (res) => {
              this.threeall.width = res.safeArea.width;
              this.threeall.productDetail_url =
                this.productDetail.resources_url;
            },
          });
          // this.$nextTick(() => {
          //   this.initThree();//加载场景
          //   this.leadModel();//导入模型
          //   this.createControls();//控制模型的缩放、平移、旋转操作
          // })
        }
        let videoarr = ["mp4", "rmvb", "wmv", "avi", "mov", "flv"];
        videoarr.forEach((el) => {
          if (this.productDetail.resources_url.split(".").pop() == el) {
            this.filetype = 3;
          }
        });
        let newTime = moment();
        if (this.userInfo.total_first_buy_num > 0) {
          this.productDetail.countDown = getTimeleft(
            this.productDetail.first_buy_at,
            newTime
          ).duration;
        } else {
          this.productDetail.countDown = getTimeleft(
            this.productDetail.opening_at,
            newTime
          ).duration;
        }
        // console.log(this.productDetail.countDown,'this.productDetail.countDown')

        if (
          this.productDetail.countDown > 0 &&
          this.productDetail.countDown <= 86400
        ) {
          this.startstate = true;
        } else {
          this.startstate = false;
        }
        // console.log(this.startstate,'this.startstate')
      } else {
        tip.defaults(res.msg);
      }
    },

    // 收藏
    async handleProductCollect() {
      // this.collect = !this.collect;

      let res = await api.productCollect({
        method: "post",
        query: {
          product_id: this.product_id,
        },
      });
      if (res.code === 0) {
        // this.productDetail = res.data;
        if (this.productDetail.is_collect == 0) {
          tip.defaults("收藏成功");
        } else {
          tip.defaults("取消收藏");
        }

        this.getProductDetail();
      } else {
        tip.defaults(res.msg);
      }
    },

    // 预约
    async handleReservedApply() {
      const res = await api.reservedApply({
        method: "post",
        query: {
          product_id: this.product_id,
        },
      });
      if (res.code == 0) {
        tip.defaults("预约成功");
      } else {
        tip.defaults(res.msg);
      }
    },

    certification_confirm() {
      uni.navigateTo({
        url: "../real_name/real_name",
      });
    },

    certification_cancel() {
      this.show_certification = false;
    },

    handlePay() {
      if (uni.getStorageSync("token") == "") {
        uni.navigateTo({
          url: "../signin/signin",
        });
        uni.setStorageSync(
          "route",
          `/pages/goods_detail/goods_detail?product_id=${this.product_id}`
        );
        return;
      }
      //   this.show = true;

      let userInfo = uni.getStorageSync("userInfo");
      if (userInfo && userInfo.is_certification == 0) {
        this.show_certification = true;
        return;
      }

      if (!this.is_market) {
        this.$u.debounce(this.handleCreateOrder, 500, true);
      } else {
        // this.marketlsit = true; //二级市场
        // this.show_purchase = true;
      }
    },

    handleCheckPayType(type) {
      this.payTypeChecked = type;
    },

    handlePayImmediately() {
      this.$u.debounce(this.handleCreateOrder, 1000, false);
    },
    //排队
    async queueDetail() {
      let res = await api.queueDetail({
        query: {
          log_id: this.lineupId,
        },
      });
      console.log(res.data, "res");
      if (res.code == 0) {
        if (res.data.order_no == null) {
          this.time = setInterval(() => {
            this.queueupdate();
          }, 5000);
        } else {
          this.order_no = res.data.order_no;
          this.pay();
          this.linestate = false;
        }
      } else {
      }
    },

    //排队更新
    async queueupdate() {
      let res = await api.updateHeartbeatAt({
        query: {
          log_id: this.lineupId,
        },
        method: "post",
      });
      if (res.code == 0) {
        if (res.data.order_no == null) {
          console.log("排队中");
        } else {
          this.order_no = res.data.order_no;
          clearInterval(this.time);
          this.pay();
          this.linestate = false;
        }
      } else {
        clearInterval(this.time);
      }
    },
    async handleCreateOrder() {
      // if (moment(time).diff(moment(), "second") > 0) {
      //   tip.defaults("未到开售时间");
      //   return;
      // }
      const res = await api
        .productCreateOrder({
          method: "post",
          query: {
            product_id: this.product_id,
            session_id: this.session_id,
            num: this.buy_num,
            sig: this.sig,
            token: this.token,
          },
          loading: "加载中",
        })
        .catch((err) => {
          tip.defaults(err.msg);
        });

      if (!res) {
        return;
      }

      if (res.code == -101) {
        // #ifdef APP-PLUS
        this.appCreateVerify();
        // #endif
        // #ifdef H5
        this.showstate = true;
        // #endif
        return;
      }

      if (res.code == 0) {
        this.buy_num = 1;
        this.order_no = res.data.order_no;
        if (res.data.log_id) {
          this.linestate = true;
          this.lineupId = res.data.log_id;
          // this.queueDetail()
          this.queueupdate();
          this.time = setInterval(() => {
            this.queueupdate();
          }, 3000);
        } else {
          this.pay();
        }
      } else {
        tip.defaults(res.msg);
      }
    },

    async pay() {
      uni.navigateTo({
        url: `../../pages/order_detail/order_detail?order_no=${this.order_no}&payment_method=${this.productDetail.payment_method}`,
      });
      return;
      const res = await api.pay({
        method: "post",
        query: {
          pay_type: 5,
          order_no: this.order_no,
          // client_ip:this.IPaddress
        },
      });

      if (res.code == 0) {
        if (this.payTypeChecked == 0) {
          // #ifdef APP-PLUS
          uni.navigateTo({
            url: `/pages/webview/webview?url=${res.data}`,
          });
          return;
          // #endif

          // #ifdef H5
          window.open(res.data);
          // #endif
        }
        var params = res.data;
        // App上生效
        let orderInfo = {
          appid: params.appid, //对应的appid
          noncestr: params.noncestr,
          package: params.package,
          partnerid: params.partnerid,
          prepayid: params.prepayid,
          timestamp: params.timestamp,
          sign: params.sign, //二次签名
        };
        uni.requestPayment({
          provider: "wxpay", // wxpay、alipay
          orderInfo: JSON.stringify(orderInfo), //微信、支付宝订单数据
          success: function (res) {
            tip.success("支付成功");
            console.log("res", res);
          },
          fail: function (err) {
            tip.defaults("支付失败");
            console.log("err", err);
          },
        });
      } else {
        tip.defaults(res.msg);
      }
    },

    marketChange(index) {
      this.current = index;
      this.price_id = 0;
      this.price_img = "/static/price.png";

      if (index == 0) {
        this.buyshopList("", "", true);
      } else if (index == 1) {
        this.buyshopList("", 1, true);
      }
    },
    dealChange(index) {
      this.deal_current = index;
      this.entrustList = [];
      // index == 0
      //   ? (this.entrust_type = "")
      //   : index == 1
      //   ? (this.entrust_type = "buy")
      //   : (this.entrust_type = "sell");

      index == 0 ? (this.entrust_type = "") : (this.entrust_type = "sell");

      this.getEntrustList(true);
    },
    handle_price_sort() {
      this.current = 2;
      var price_sort = 1;

      if (this.price_id == 2) {
        this.price_id = 1;
        this.price_img = "/static/price_low.png";
        price_sort = 2;
      } else {
        this.price_id = 2;
        this.price_img = "/static/price_high.png";
      }
      this.buyshopList(price_sort, "", true);
    },
    markebuy(id) {
      if (this.userInfo && this.userInfo.is_certification == 0) {
        this.show_certification = true;
        return;
      }
      this.$u.debounce(this.neworder(id), 1000, true);
    },
    async neworder(id) {
      let res = await api.createOrder({
        method: "post",
        query: {
          consignment_id: id,
        },
        loading: "加载中",
      });
      if (res.code == 0) {
        uni.navigateTo({
          url: `../../pages/order_detail/order_detail?order_id=${res.data.consignment_order_id}&market=${this.marketstate}&order_no=${res.data.order_no}`,
        });
      } else {
        tip.defaults(res.msg);
      }
    },

    handleSelect() {
      this.is_to_select_merchant = true;
      uni.navigateTo({
        url: "../MerchantList/MerchantList",
      });
    },
    handleShowPurchase() {
      this.show_deal = false;
      this.show_purchase = true;
    },
    handleShowSellOut() {
      this.show_deal = false;
      this.show_sellOut = true;
    },
    handleShowOperation() {
      this.show_deal = false;
      this.show_operation = true;
    },
    handleClickEntrustItem(id, type, num, price) {
      if (type == "sell") {
        this.show_deal = false;
        this.show_purchase = true;
        this.now_click_entrust_id = id;
        this.now_click_entrust_num = num;
        this.click_entrust_max = num;
        this.single_entrust_price = price;
        // this.now_click_entrust_price = (+num * +price).toFixed(2);
      }
    },
    async getEntrustList(refresh) {
      if (refresh) {
        this.entrust_log_page = 1;
      }
      let res = await api.entrust_list({
        method: "get",
        query: {
          product_id: this.product_id,
          type: this.entrust_type,
          status: this.deal_current == 0 ? "finished" : "",
          page: this.entrust_log_page,
          limit: this.entrust_log_limit,
        },
        loading: "加载中",
      });

      if (res.code === 0) {
        if (refresh) {
          this.entrustList = res.data;
        } else {
          this.entrustList = this.entrustList.concat(res.data);
        }
      } else {
        tip.defaults(res.msg);
      }
    },
    handlePurchaseAdd(key) {
      if (this.is_constant_price && key.slice(-5) == "price") {
        tip.defaults("该商品恒定价格");
        return;
      }

      if (
        Number(this[key]) + 1 > Number(this.price_arr[1]) &&
        key.slice(-5) == "price"
      ) {
        return;
      }

      this[key] = Number((Number(this[key]) + 1).toFixed(2));
    },
    handlePurchaseSub(key) {
      if (this.is_constant_price && key.slice(-5) == "price") {
        tip.defaults("该商品恒定价格");
        return;
      }

      if (
        Number(this[key]) - 1 < Number(this.price_arr[2]) &&
        key.slice(-5) == "price"
      ) {
        return;
      }

      if (Number(this[key]) == 0) return;

      this[key] = Number((Number(this[key]) - 1).toFixed(2));
    },
    handleSub(key) {
      if (Number(this[key]) == 1) return;
      this[key] = Number((Number(this[key]) - 1).toFixed(2));
    },
    handleAdd(key) {
      if (Number(this[key]) == this.click_entrust_max) return;
      this[key] = Number((Number(this[key]) + 1).toFixed(2));
    },
    priceBlur(key) {
      if (this[key] > Number(this.price_arr[1]))
        this[key] = Number(this.price_arr[1]);

      if (this[key] < Number(this.price_arr[2]))
        this[key] = Number(this.price_arr[2]);
    },
    async getOpenPayType() {
      let res = await api.openPayType({
        query: {},
        method: "get",
      });
      if (res.code == 0) {
        this.OpenPayTypeArr = res.data.split("|");

        // 筛选只支持的支付方式
        if (this.is_entrust) {
          this.OpenPayTypeArr = this.OpenPayTypeArr.filter((x) => x == "15");
        }

        // 默认自动选第一个
        if (this.OpenPayTypeArr[0] == "1") {
          this.now_purchase_payment = 0;
        } else if (this.OpenPayTypeArr[0] == "14") {
          this.now_purchase_payment = 1;
        } else if (this.OpenPayTypeArr[0] == "15") {
          this.now_purchase_payment = 2;
        }
      } else {
        tip.defaults(res.msg);
      }
    },
    async getWalletUrl() {
      let res = await api.getWalletUrl({
        method: "get",
        query: {},
      });

      if (res.code == 0) {
        this.shande_wallet_url = res.data;
      } else {
        tip.defaults(res.msg);
      }
    },
    async handleMatchMaking() {
      let pay_type;
      if (this.now_purchase_payment == 0) {
        pay_type = 1;
      } else if (this.now_purchase_payment == 1) {
        pay_type = 14;
      } else if (this.now_purchase_payment == 2) {
        pay_type = 15;

        // 未开户
        if (!this.userInfo.sd_wallet_user_no) {
          tip.defaults("请前往杉德开户");

          setTimeout(() => {
            // #ifdef H5
            if (this.shande_wallet_url) {
              window.location.href = this.shande_wallet_url;
            }
            // #endif

            // #ifdef APP-PLUS
            if (this.shande_wallet_url) {
              plus.runtime.openURL(this.shande_wallet_url);
            }
            // #endif
          }, 1500);
          return;
        }
      }

      let res = await api.newMatchMaking({
        method: "post",
        query: {
          sell_entrust_log_id: this.now_click_entrust_id,
          entrusted_num: this.now_click_entrust_num,
          pay_type: pay_type,
        },
      });

      if (res.code === 0) {
        // 杉德收银台
        if (this.is_entrust && pay_type == "15") {
          // #ifdef H5
          if (res.data != null) {
            window.location.href = res.data.pay_url;
          }
          // #endif
          // #ifdef APP-PLUS
          plus.runtime.openURL(res.data.pay_url);
          // #endif

          // let order_no = res.data.order_no;
          // const result = await api.pay({
          //   method: "post",
          //   query: {
          //     pay_type: pay_type,
          //     order_no: order_no,
          //     hy_auth_uid: this.userInfo ? this.userInfo.hy_auth_uid : "",
          //   },
          //   loading: "加载中",
          // });
          // if (result.code == 0) {
          //   if (pay_type == 15) {
          //     // #ifdef H5
          //     if (result.data != null) {
          //       window.location.href = result.data;
          //     }
          //     // #endif
          //     // #ifdef APP-PLUS
          //     plus.runtime.openURL(result.data);
          //     // #endif
          //   }
          // } else {
          //   tip.defaults(result.msg);
          // }
        }
        this.show_purchase = false;
        this.show_sellOut = false;
        setTimeout(() => {
          this.getEntrustList(true);
        }, 1000);
      } else {
        tip.defaults(res.msg);
      }
    },
    async handleEntrustCommit(type) {
      // 买入
      if (
        type == "buy" &&
        (this.purchase_price < Number(this.price_arr[2]) ||
          this.purchase_price > Number(this.price_arr[1]))
      ) {
        tip.defaults(`价格必须在${this.price_arr[2]}-${this.price_arr[1]}之间`);
        return;
      }
      if (type == "buy" && this.purchase_num <= 0) {
        tip.defaults("至少需要买入1个");
        return;
      }

      // 卖出
      if (
        type == "sell" &&
        (this.sellOut_price < Number(this.price_arr[2]) ||
          this.sellOut_price > Number(this.price_arr[1]))
      ) {
        tip.defaults(`价格必须在${this.price_arr[2]}-${this.price_arr[1]}之间`);
        return;
      }
      if (type == "sell" && this.sellOut_num <= 0) {
        tip.defaults("至少需要卖出1个");
        return;
      }
      if (type == "sell" && !this.MerchantSelect) {
        tip.defaults("请选择挂售商家");
        return;
      }

      let pay_type;
      if (this.now_purchase_payment == 0) {
        pay_type = 1;
      } else if (this.now_purchase_payment == 1) {
        pay_type = 14;
      } else if (this.now_purchase_payment == 2) {
        pay_type = 15;

        // 未开户
        if (!this.userInfo.sd_wallet_user_no) {
          tip.defaults("请前往杉德开户");

          setTimeout(() => {
            // #ifdef H5
            if (this.shande_wallet_url) {
              window.location.href = this.shande_wallet_url;
            }
            // #endif

            // #ifdef APP-PLUS
            if (this.shande_wallet_url) {
              plus.runtime.openURL(this.shande_wallet_url);
            }
            // #endif
          }, 1500);
          return;
        }
      }
      let res = await api.entrust_commit({
        method: "post",
        query: {
          product_id: this.product_id,
          entrusted_price:
            type == "buy" ? this.purchase_price : this.sellOut_price, //委托价
          type: type,
          entrusted_num: type == "buy" ? this.purchase_num : this.sellOut_num, //委托数量
          linked_merchant_id: type == "sell" ? this.MerchantSelect.id : "",
          pay_type: type == "buy" ? pay_type : "",
        },
      });

      if (res.code === 0) {
        // 杉德收银台
        if (this.is_entrust && pay_type == "15" && type == "buy") {
          let order_no = res.data.order_no;

          const result = await api.pay({
            method: "post",
            query: {
              pay_type: pay_type,
              order_no: order_no,
              hy_auth_uid: this.userInfo ? this.userInfo.hy_auth_uid : "",
            },
            loading: "加载中",
          });

          if (result.code == 0) {
            if (pay_type == 15) {
              // #ifdef H5
              if (result.data != null) {
                window.location.href = result.data;
              }
              // #endif

              // #ifdef APP-PLUS
              plus.runtime.openURL(result.data);
              // #endif
            }
          } else {
            tip.defaults(result.msg);
          }
        }

        if (pay_type != 15 || type == "sell") {
          tip.defaults("发布成功");
        }
        this.show_purchase = false;
        this.show_sellOut = false;
        setTimeout(() => {
          this.getEntrustList(true);
        }, 1000);
      } else {
        tip.defaults(res.msg);
      }
    },
    async getUserEntrustLog(refresh) {
      if (refresh) {
        this.user_entrust_log_page = 1;
      }
      let res = await api.entrust_userEntrustLog({
        method: "get",
        query: {
          product_id: this.product_id,
          type: "",
          status: "ing",
          page: this.user_entrust_log_page,
          limit: this.user_entrust_log_limit,
        },
        loading: "加载中",
      });

      if (res.code === 0) {
        if (refresh) {
          this.userEntrustList = res.data;
        } else {
          this.userEntrustList = this.userEntrustList.concat(res.data);
        }
      } else {
        tip.defaults(res.msg);
      }
    },
    handleShowRevoke(item) {
      this.show_revoke = true;
      this.now_revoke = item;
    },
    async revokeConfirm() {
      let res = await api.entrust_cancel({
        method: "post",
        query: {
          entrust_log_id: this.now_revoke.id,
        },
        loading: "加载中",
      });

      if (res.code === 0) {
        this.show_revoke = false;
        tip.defaults("已撤销");
        this.getUserEntrustLog(true);
      } else {
        tip.defaults(res.msg);
      }
    },
    revokeCancel() {
      this.show_revoke = false;
    },
    handlePurchasePayment(index) {
      this.now_purchase_payment = index;
    },
  },
};
</script>

<script module="three" lang="renderjs">
const THREE = require('static/three/build/three.min.js')

// OrbitControls 是对 Threejs 的三维场景进行缩放、平移、旋转操作
import {
	OrbitControls
} from 'static/three/examples/jsm/controls/OrbitControls.js'

// 导入 glb 格式模型，若要导入其他格式模型，可尝试在 loaders 目录下加载其他文件
import {
	GLTFLoader
} from 'static/three/examples/jsm/loaders/GLTFLoader.js'
 import { RGBELoader } from 'static/three/examples/jsm/loaders/RGBELoader.js';

var renderer;
var scene;
var camera;
var controls;

export default {
   props: {
     url: ""
   },
   onUnload(){
     renderer = null
     scene = null
     camera = null
     controls = null
   },
	mounted() {
		// this.initThree();//加载场景
		// this.leadModel(resources_url);//导入模型
		// this.createControls();//控制模型的缩放、平移、旋转操作
	},
	methods: {
     all(newValue, oldValue, ownerInstance, instance){
       console.log(newValue,'newValue');
       if(newValue.productDetail_url==""){
         return
       }
       console.log('all执行');
       this.initThree(newValue);//加载场景
	  	this.leadModel(newValue);//导入模型
	  	this.createControls();//控制模型的缩放、平移、旋转操作
     },
		createControls() {
			controls = new OrbitControls(camera, renderer.domElement)
       //滚轮是否可控制zoom
       controls.enableZoom = false;
       //是否自动旋转
       controls.autoRotate = true;
       controls.autoRotateSpeed = 2.0;

       //是否可平移，默认移动速度为7px
       controls.enablePan = false;

       //鼠标控制是否可用
       // controls.enabled = false;

       // //上下翻转的最大角度
       // controls.maxPolarAngle = 1.55;

       // //上下翻转的最小角度
       // controls.minPolarAngle = 1.55;
		},

		// 导入模型
		leadModel(newValue) {
			let loader = new GLTFLoader();
			// 导入本地或者服务器上的模型都可以

			loader.load(newValue.productDetail_url, function(gltf) {
				// loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function(gltf) {
           // http://img.yunshiar.com/models/niuniu.gltf

         // gltf.scene.scale.set(20, 20, 20);

         // gltf.scene.traverse( function ( child ) {
         //   if ( child.isMesh ) {
         //     child.material.emissive = new THREE.Color(0x414141);
         //     child.material.emissiveMap = child.material.map;
         //     child.material.emissiveIntensity = 0.1;
         //     child.material.metalness = 1;
         //     child.material.roughness = 1;
         //   }
         // });
         if(newValue.is_picture){
           {
            var geometry = new THREE.PlaneGeometry(44,44); //矩形平面
            var textureLoader = new THREE.TextureLoader();

            // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
            textureLoader.load(newValue.picture_cover, function(texture) {
              texture.encoding = THREE.sRGBEncoding;
              var material = new THREE.MeshLambertMaterial({
                // color: 0x0000ff,
                // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
                map: texture,//设置颜色贴图属性值
              });
              var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
              let planeMat = new THREE.MeshBasicMaterial;
              planeMat.side=THREE.DoubleSide;
              // mesh.rotateY(3.14159274);

              // mesh.translateY(3.1);
              // mesh.translateZ(20);
              // mesh.translateX(-0.1);
              // mesh.position.set(22,0,10)

              scene.add(mesh); //网格模型添加到场景中
            });
           }

          if(newValue.is_shanghu){
            var geometry1 = new THREE.PlaneGeometry(43,43); //矩形平面
            var textureLoader1 = new THREE.TextureLoader();

            // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
            textureLoader1.load(newValue.shanghu_bg, function(texture) {
              texture.encoding = THREE.sRGBEncoding;
              var material = new THREE.MeshLambertMaterial({
                // color: 0x0000ff,
                // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
                map: texture,//设置颜色贴图属性值
              });
              var mesh = new THREE.Mesh(geometry1, material); //网格模型对象Mesh
              let planeMat = new THREE.MeshBasicMaterial;
              planeMat.side=THREE.DoubleSide;
              mesh.rotateY(3.14159274);

              // mesh.translateY(3.1);
              mesh.translateZ(2.5);
              // mesh.translateX(-0.1);
              // mesh.position.set(22,0,10)

              scene.add(mesh); //网格模型添加到场景中
            });
          }
         }

				scene.add(gltf.scene);

			});
		},

		initThree(newValue) {
			// 如果返回的不是未定义，说明threejs成功引入
			console.log('打印场景API', THREE.Scene);

			/* 创建场景对象Scene */
			scene = new THREE.Scene();

       // 环境灯
       // THREE.AmbientLight不需要指定位置，只需要指定颜色（十六进制）
       var ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
       scene.add(ambientLight)

       // 主光
       const mainlLight = new THREE.DirectionalLight(0xffffff,  0.5)
       mainlLight.position.set(0, 0, 25);
       scene.add(mainlLight);

       // 背光
       const backlLight = new THREE.DirectionalLight(0xffffff, 0.5)
       backlLight.position.set(0, 0, -25);
       scene.add(backlLight);

       // // 底光
       // const bottomlLight = new THREE.DirectionalLight(0xffffff, 0.1)
       // bottomlLight.position.set(0, -50, 25);
       // scene.add(bottomlLight);

			/*
			    相机设置
			 */
			// var width = window.innerWidth; // 窗口宽度
			// var height = window.innerHeight; // 高度
			var width = newValue.width; // 窗口宽度
			var height = newValue.width; // 高度
			var k = width / height; // 窗口宽高比
			var s = 1000; // 三维场景显示范围控制系数，系数越大，显示的范围越大
			// 创建相机对象（正射投影）
			camera = new THREE.PerspectiveCamera(45, k, 1, 1000);
       if(newValue.is_picture){
         camera.position.set(0, 0, 100); //设置相机的摆放位置
       }else{
         camera.position.set(0, 0, 5); //设置相机的摆放位置
       }
			// camera.lookAt(new THREE.Vector3(0, 0, 0)); // 控制相机的焦点(镜头)位置，决定相机的朝向（取值为3维坐标对象-THREE.Vector3(x,y,z)）

			/*
			    创建渲染器对象
			 */
			renderer = new THREE.WebGLRenderer({
				antialias: true,   //抗锯齿
				alpha: true //设置透明，为true时，背景颜色需要注释掉
			});

       renderer.toneMapping = THREE.NoToneMapping;
       renderer.textureEncoding = THREE.sRGBEncoding;
       renderer.outputEncoding = THREE.sRGBEncoding;
       renderer.setPixelRatio(window.devicePixelRatio); //开启HiDPI
       renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.setSize(width, height); // 设置渲染区域尺寸
			// renderer.setClearColor(0XECF1F3, 1); // 设置背景颜色

       // 环境贴图HDR
       new RGBELoader().load('https://img.metatmt.com/model/venice_sunset_1k.hdr', (texture) => {
         const pmremGenerator = new THREE.PMREMGenerator(renderer);
         const envMap = pmremGenerator.fromEquirectangular(texture).texture;
         pmremGenerator.dispose();
         scene.environment = envMap;
         // scene.background = envMap
       });

			const element = document.getElementById('threeView')
			element.appendChild(renderer.domElement); // body元素中插入canvas对象

       // var geometry = new THREE.PlaneGeometry(8.7,8.7); //矩形平面
       // var textureLoader = new THREE.TextureLoader();

       // // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
       // textureLoader.load(this.productDetail.resources_url, function(texture) {
       //   var material = new THREE.MeshLambertMaterial({
       //     // color: 0x0000ff,
       //     // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
       //     map: texture,//设置颜色贴图属性值
       //   });
       //   var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
       //   // mesh.rotateY(0.176);

       //   // mesh.translateY(3.1);
       //   // mesh.translateZ(0.65);
       //   // mesh.translateX(-0.1);
       //   scene.add(mesh); //网格模型添加到场景中
       // });


       // var geometry = new THREE.PlaneGeometry(8.7,8.7); //矩形平面
       // var material = new THREE.MeshLambertMaterial({
       //   color: 0x000000, //三角面颜色
       //   transparent: true,
       //   opacity : 0.1
       // }); //材质对象
       // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
       //  scene.add(mesh); //网格模型添加到场景中

			// 执行渲染操作，指定场景，相机作为参数
			renderer.render(scene, camera);
       //  console.log(animationstatr,'this.animationstatr');
			this.render();
		},

		// 动画
		render() {
       if (!scene) {
         return
       }
       scene.rotateY(0.006);//每次绕y轴旋转0.01弧度
       // scene.rotateZ(0.01);//每次绕Z轴旋转0.01弧度
       // scene.rotateX(0.01);//每次绕X轴旋转0.01弧度

       requestAnimationFrame(() => {
         this.render();
       });

       renderer.render(scene, camera); //执行渲染操作
		},

	}
}
</script>

<style lang="scss">
.u-drawer-content-visible {
  background-color: #292b2b !important;
}
</style>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 0 150rpx 0;
  background: $bg-color1;

  min-height: 100vh;

  background-image: url(../../static/goods_detail_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 1352rpx;
}
.collect_icon {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 50rpx;
  height: 50rpx;
}
.goodsImage {
  // margin: 0 187rpx;
  margin: 150rpx auto 90rpx;
  width: 316rpx;
  height: 316rpx;
  border-radius: 32rpx;
  // border: 2rpx solid #dfdfdf;
  &_product {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // margin: 50%;
    // transform: translate(-50%, -50%);
    border-radius: 32rpx;
    // width: 294rpx;
    // height: 294rpx;
    width: 430rpx;
    height: 430rpx;
  }
}
.base {
  position: relative;
  display: flex;
  justify-content: center;
  // margin: -60rpx 44rpx 0 44rpx;
  margin: 0 44rpx 0 44rpx;
  &_image {
    width: 670rpx;
    height: 360rpx;
  }
}
.oliveBranch {
  position: absolute;
  // top: 340rpx;
  top: 370rpx;
  // left: 30rpx;
  // right: 30rpx;

  padding: 0 30rpx;
  // margin: -200rpx 30rpx 0;
  margin: -200rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &_image1 {
    width: 100rpx;
    height: 110rpx;
  }
  &_image2 {
    width: 100rpx;
    height: 110rpx;
  }
  &_center {
    &_first {
      width: 400rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
      text-align: center;
      word-break: break-all;
    }
    &_group {
      margin: 10rpx auto;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
    }
    &_second {
      display: flex;
      align-items: center;
      justify-content: center;

      // margin: 20rpx auto;
      margin: 10rpx 0 0 0;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;

      // width: 202rpx;
      height: 34rpx;
      border-radius: 4rpx;
    }
    &_limited {
      // width: 76rpx;
      padding: 0 14rpx;
      height: 34rpx;
      color: $text-color4;
      background: $gradient1;
      background-repeat: no-repeat;
      background-size: 100%;
      border-radius: 4rpx;
      text-align: center;
    }
    &_inStock {
      padding: 0 14rpx;
      // margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;
      background: $bg-color2;
    }
  }
  &_surplus {
    width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    height: 44rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }
}
.oliveBranch2 {
  position: absolute;
  top: 900rpx;
}
.oliveBranch3 {
  width: 750rpx;
  position: absolute;
  top: 1160rpx;
}
.authorWrapper2 {
  // position: absolute;
  // top: 860rpx;
  // width: 690rpx;

  background-color: $bg-color3;
  // border-radius: 24rpx;
  border-radius: 24rpx 24rpx 0 0;
  // margin: 0 30rpx;

  position: relative;
  z-index: 999;
  margin-top: -40rpx;
}
.authorWrapper {
  margin-top: 200rpx !important;
}
.author {
  position: relative;
  display: flex;
  align-items: center;
  // margin-top: 20rpx;
  padding: 35rpx 30rpx 0rpx;
  // width: 690rpx;
  height: 132rpx;
  border-radius: 24rpx;
  &_image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }
  &_content {
    margin-left: 20rpx;
    &_first {
      width: 400rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_second {
      width: 500rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #bbbbbe;
      line-height: 34rpx;
    }
  }
  &_price {
    position: absolute;
    top: 52rpx;
    right: 40rpx;

    // width: 178rpx;
    height: 58rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 58rpx;
    text-align: right;
  }
}
.story {
  margin-top: 30rpx;
  // margin: 0 30rpx;
  &_title {
    height: 44rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 44rpx;
  }
  &_title2 {
    height: 44rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
  }

  &_main {
    margin: 50rpx -30rpx;
    width: 750rpx;
  }
  &_richText {
    padding: 0 30rpx;
    margin-top: 30rpx;
    color: #ffffff;
    font-size: 24rpx;
  }
  &_bottom {
    background-color: $bg-color3;
    // border-radius: 24rpx;
    width: 100%;
    color: #ffffff;
    font-weight: 400;
    font-size: 24rpx;
    // margin-top: 30rpx;
    padding: 30rpx 0;
  }
  &_bottom_title {
    font-size: 28rpx;
    padding: 30rpx;
    font-weight: 500;
  }
  &_bottom_image {
    width: 420rpx;
    height: 40rpx;
    margin-top: 30rpx;
    position: relative;
    left: 20%;
  }
}
.newFixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 750rpx;
  height: 130rpx;
  background: $bg-color4;

  &_button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20rpx auto;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;
    background: $button;
    background-repeat: no-repeat;
    // background-attachment: fixed;
    background-size: 100%;
  }
}
.bottom {
  z-index: 999;
  height: 110rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: $bg-color3;

  display: none;
  &_left {
    height: 52rpx;
    font-size: 44rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 52rpx;
  }
  &_right {
    display: flex;
    align-items: center;
    &_timerIcon {
      margin-right: 6rpx;
      width: 32rpx;
      height: 32rpx;
    }
    &_timerText {
      font-size: 28rpx;
      font-weight: 400;
      color: #f78623;
      line-height: 40rpx;
      opacity: 0.46;
    }
    &_sale1 {
    }
    &_sale2 {
      margin-left: 12rpx;
    }
  }
  &_buy {
    width: 154rpx;
    height: 68rpx;
    color: $text-color4;
    // background: $button;
    background: $gradient1;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 34rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 68rpx;
    text-align: center;
  }
  &_buttonGray {
    color: $text-color1;
    background: #999999;
  }
}
.top_view {
  height: 80rpx;
  width: 100%;
  position: relative;

  background-image: url("/static/background_mine.png");
  // background-image: url('http://img.senbiaojita.cn/background_mine.png');
  background-repeat: no-repeat;
  /* background-position: center; */
  background-attachment: fixed;
  /* background-size: cover; */
  background-size: 100%;

  background-color: #111218;
}
.popup_box {
  width: 750rpx;
  height: 100%;
  padding: 40rpx 50rpx;
  background: $bg-color3;
  &_title {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 40rpx;
    text-align: center;
  }
  &_price {
    margin-top: 16rpx;
    height: 58rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 58rpx;
    text-align: center;
  }
  &_title2 {
    margin-top: 52rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
  }
  &_paytype {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_left {
      display: flex;
      align-items: center;
    }
    &_icon {
      width: 40rpx;
      height: 40rpx;
    }
    &_type {
      margin-left: 20rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
    }
    &_checked {
      width: 40rpx;
      height: 40rpx;
    }
  }
  &_paytype + &_paytype {
    border-top: 2rpx solid #262934;
  }
  &_button {
    margin-top: 30rpx;
    width: 650rpx;
    height: 90rpx;
    border-radius: 16rpx;

    font-size: 32rpx;
    font-weight: 400;
    line-height: 90rpx;
    text-align: center;
    color: $text-color4;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.title {
  // position: absolute;
  // top: 86rpx;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0rpx;
  left: 0;
  right: 0;
  height: 60rpx;
  width: 750rpx;
  background: $bg-color1;

  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  z-index: 999;
}
.videocss {
  width: 750rpx !important;
}
.video {
  width: 750rpx;
  height: 750rpx;
}
.linecss {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 520rpx;
  // padding-top: 50%;
  // transform: translate(-0%,-20%);
  background: $bg-color3;
  position: relative;
  .loadingimg {
    position: absolute;
    // left: 50%;
    top: 15%;
    transform: translate(-50%, -60%);
    width: 300rpx;
    height: 300rpx;
    // linear

    animation: rotateArround 2s ease 0s infinite normal;
    -webkit-animation: rotateArround 2s ease 0s infinite normal;
    -moz-animation: rotateArround 2s ease 0s infinite;
    -ms-animation: rotateArround 2s ease 0s infinite;
    -o-animation: rotateArround 2s ease 0s infinite;
  }
  .ctnterimg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
  }
  .ctntertext {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
    padding-top: 135rpx;
    color: #ffffff;
  }
}

.markebottom {
  border-radius: 48rpx 48rpx 0 0;
  // background: #101428;
  min-height: 600px;
  padding-bottom: 30rpx;
  background: #292b2b;
  .tabs {
    padding: 15rpx 0;
    height: 104rpx;
    border-bottom: 2rpx solid #313535;
    .price {
      position: absolute;
      right: 35rpx;
      top: 15rpx;
      width: 16rpx;
      height: 24rpx;
      z-index: 99;
      padding: 30rpx 10rpx 30rpx 130rpx;
    }
  }
  .markelist {
    .markelist_detail {
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 180rpx;
      border-bottom: 2rpx solid #313535;
      margin: 0 30rpx;
      .markelist_detail_left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 30rpx 0;
        .markebuy {
          width: 58px;
          height: 28px;
          color: #ffffff;
          background: linear-gradient(90deg, #1fe6e6 0%, #df7fd6 100%);
          border-radius: 14px;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 30px;
          text-align: center;
        }
        .markelist_detail_user {
          display: flex;
          align-content: center;
          text {
            margin-left: 10rpx;
            font-size: 12px;
          }
          .author_image {
            width: 35rpx;
            height: 35rpx;
          }
        }
        .markelist_detail_no {
          width: 440rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          text:nth-child(2) {
            margin-left: 20rpx;
          }
        }
        .markelist_detail_price {
          font-size: 18px;
        }
      }
      .markelist_detail_right {
        margin: 30rpx 0;
        align-content: flex-end;
        .markelist_detail_price {
          font-size: 18px;
          display: block;
        }
        .markebuy {
          width: 58px;
          height: 28px;
          color: #ffffff;
          background: linear-gradient(90deg, #1fe6e6 0%, #df7fd6 100%);
          border-radius: 14px;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 30px;
          text-align: center;
          float: right;
          margin-top: 30rpx;
        }
      }
    }
  }
}
.deal {
  border-radius: 48rpx 48rpx 0 0;
  height: 100%;
  background: #292b2b;
  .tabs {
    padding: 15rpx 0;
    height: 104rpx;
    border-bottom: 2rpx solid #313535;
    .price {
      position: absolute;
      right: 35rpx;
      top: 15rpx;
      width: 16rpx;
      height: 24rpx;
      z-index: 99;
      padding: 30rpx 10rpx 30rpx 130rpx;
    }
  }
  .detailed {
    &_item {
      display: flex;
      align-items: center;
      height: 104rpx;
      color: #ffffff;
      border-bottom: 2rpx solid #313535;
      &_column {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      &_icon {
        margin-left: 2rpx;
        width: 34rpx;
        height: 34rpx;
      }
    }
  }
  // &_bottom {
  //   margin-top: 32rpx;
  //   padding: 20rpx 40rpx;
  // }
  // &_button {
  //   width: 670rpx;
  //   height: 90rpx;
  //   text-align: center;
  //   font-size: 32rpx;
  //   font-weight: 400;
  //   color: #ffffff;
  //   line-height: 90rpx;

  //   background: $button;
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  // }
  &_bottom {
    // border-top: 2rpx solid #313535;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
    // margin: 28rpx -40rpx 0;
    padding: 24rpx 30rpx;
    height: 130rpx;
    width: 750rpx;
    .color1 {
      color: #ff5757;
      border: 2rpx solid #956060;
      background: rgba(255, 87, 87, 0.1);
    }
    .color2 {
      color: #1fe7e7;
      border: 2rpx solid #467070;
      background: rgba(31, 231, 231, 0.1);
    }
    .color3 {
      color: #ffffff;
      // border: 2rpx solid rgba(255, 255, 255, 0.24);
      background: linear-gradient(90deg, #1fe6e6 0%, #3f9ed2 48%, #df7fd6 100%);
    }
  }
  &_button {
    // width: 210rpx;
    flex: 1;
    height: 80rpx;
    border-radius: 8rpx;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 80rpx;
    text-align: center;
  }
  &_button + &_button {
    margin-left: 30rpx;
  }
}
.purchase {
  position: relative;
  padding: 40rpx 40rpx 0 40rpx;
  height: 100%;
  background: #292b2b;
  border-radius: 36rpx 36rpx 0 0;
  &_title {
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
  }
  &_balance {
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    color: #999999;
    &_icon {
      margin-right: 14rpx;
      width: 24rpx;
      height: 28rpx;
    }
    .highlight {
      color: #1fe7e7;
    }
  }
  &_number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 0;
    border-bottom: 2rpx solid #313535;
  }
  &_data {
    margin-top: 40rpx;
    padding-bottom: 40rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #313535;
    &-sellOut {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
  &_priceBlock {
    height: 116rpx;
    border-bottom: 2rpx solid #313535;
    &_text1 {
      height: 116rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 116rpx;
    }
    &_text2 {
      height: 116rpx;
      font-size: 40rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 116rpx;
    }
  }
  &_payment {
    padding-top: 40rpx;
    &_item {
      position: relative;
      display: flex;
      align-items: center;
    }
    &_item + &_item {
      margin-top: 42rpx;
    }
    &_icon {
      width: 40rpx;
      height: 40rpx;
    }
    &_text {
      margin-left: 24rpx;
      // width: 112rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 40rpx;
    }
    &_checked {
      position: absolute;
      right: 0;
      // margin-left: 454rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  &_bottom {
    // margin-top: 76rpx;
    position: absolute;
    bottom: 30rpx;
  }
  &_button {
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;

    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.addSub {
  display: flex;
  align-items: center;
  width: 316rpx;
  // height: 80rpx;
  border: 2rpx solid #956060;
  line-height: 80rpx;
  &_left {
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 87, 87, 0.1);
    // color: #ff5757;
  }
  &_center {
    width: 156rpx;
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    border-left: 2rpx solid #956060;
    border-right: 2rpx solid #956060;
    &_input {
      width: 156rpx;
      height: 80rpx;
      font-size: 32rpx;
      // font-weight: bold;
      color: #ffffff;
    }
  }
  &_right {
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 87, 87, 0.1);
    // color: #ff5757;
  }
  &_icon {
    margin: 50% auto auto 50%;
    transform: translate(-50%, -50%);

    width: 52rpx;
    height: 52rpx;
  }
  .bg2 {
    background: rgba(31, 231, 231, 0.1);
  }
}
.sellOut {
  &_border {
    border: 2rpx solid #467070;
  }
  &_center {
    border-left: 2rpx solid #467070;
    border-right: 2rpx solid #467070;
  }
}
.DeclineUp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210rpx;
  height: 64rpx;
  border-radius: 8rpx;
  border: 2rpx solid #666666;
  &_text {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #cccccc;
    line-height: 40rpx;
  }
  &_num {
    margin-left: 12rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
  }
  &_icon {
    margin-left: 6rpx;
    width: 24rpx;
    height: 28rpx;
  }
  .green {
    color: #57ff65;
  }
  .red {
    color: #ff5757;
  }
}
.DeclineUp + .DeclineUp {
  margin-left: 30rpx;
}
.merchant {
  margin-top: 40rpx;
  border-top: 2rpx solid #313535;
  &_title {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // width: 224rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 44rpx;
    &_right {
      color: #1fe7e7;
    }
    &_icon {
      margin-left: 10rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }
  .select {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    width: 670rpx;
    height: 160rpx;
    border-radius: 24rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #1fe7e7;
    line-height: 160rpx;

    background-image: url("/static/deal_merchant_bg.png");
    background-repeat: no-repeat;
    // background-attachment: fixed;
    background-size: 100%;
    &_icon {
      margin-left: 10rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }
  .selected {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    padding: 20rpx;
    width: 670rpx;
    height: 160rpx;
    border-radius: 24rpx;

    background-image: url("/static/deal_merchant_bg.png");
    background-repeat: no-repeat;
    // background-attachment: fixed;
    background-size: 100%;
    &_icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 16rpx;
    }
    &_content {
      margin-left: 28rpx;
      &_row1 {
        // width: 256rpx;
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 44rpx;
      }
      &_row2 {
        margin-top: 16rpx;

        // width: 182rpx;
        height: 40rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #1fe7e7;
        line-height: 40rpx;
      }
    }
  }
}
.operation {
  padding: 40rpx 40rpx 0 40rpx;
  height: 100%;
  background: #292b2b;
  border-radius: 36rpx 36rpx 0 0;
  &_title {
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
  }
  &_tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40rpx -40rpx 0;
    width: 750rpx;
    height: 100rpx;
    background: #373838;
    &_item {
      // flex: 1;
      height: 100rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #cccccc;
      line-height: 100rpx;
      text-align: center;
    }
    &_item1 {
      width: 176rpx;
    }
    &_item2 {
      flex: 1;
    }
    &_item3 {
      flex: 1;
    }
    &_item4 {
      width: 176rpx;
    }
  }
  .row {
    // margin-top: 0;
    margin: 0;
    width: 750rpx;
    height: 100rpx;
    color: #ffffff;
    background: transparent;
    border-bottom: 2rpx solid #313535;
    text-align: center;
    justify-content: flex-start;
    &_item {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &_name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &_time {
        margin-top: 6rpx;
        height: 34rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #cccccc;
        line-height: 34rpx;
        text-align: left;
      }
    }
    &_item1 {
      // padding: 30rpx;
    }
    .color1 {
      color: #ff5757;
    }
    .color2 {
      color: #1fe7e7;
    }
  }
  // &_bottom {
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   margin: 28rpx -40rpx 0;
  //   padding: 24rpx 30rpx;
  //   height: 130rpx;
  //   width: 750rpx;
  //   .color1 {
  //     color: #ff5757;
  //     border: 2rpx solid #956060;
  //     background: rgba(255, 87, 87, 0.1);
  //   }
  //   .color2 {
  //     color: #1fe7e7;
  //     border: 2rpx solid #467070;
  //     background: rgba(31, 231, 231, 0.1);
  //   }
  //   .color3 {
  //     color: #ffffff;
  //     // border: 2rpx solid rgba(255, 255, 255, 0.24);
  //     background: linear-gradient(90deg, #1fe6e6 0%, #3f9ed2 48%, #df7fd6 100%);
  //   }
  // }
  // &_button {
  //   width: 210rpx;
  //   height: 80rpx;
  //   border-radius: 8rpx;
  //   font-size: 32rpx;
  //   font-weight: 400;
  //   line-height: 80rpx;
  //   text-align: center;
  // }
  &_bottom {
    margin: 28rpx -40rpx 0;
    padding: 20rpx 40rpx;
  }
  &_button {
    // width: 670rpx;
    height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;

    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.revoke {
  position: fixed;
  top: 328rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11000;
  padding-top: 50rpx;
  width: 590rpx;
  text-align: center;
  background: #292b2b;
  border-radius: 24rpx;
  .color1 {
    color: #ff5757;
  }
  .color2 {
    color: #1fe7e7;
  }
  &_row1 {
    // width: 128rpx;
    height: 56rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #cccccc;
    line-height: 56rpx;
    text-align: center;
  }
  &_row2 {
    margin-top: 40rpx;
    padding: 0 50rpx;
    display: flex;
    align-items: center;
    &_title {
      // width: 128rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #cccccc;
      line-height: 44rpx;
    }
    &_value {
      margin-left: 30rpx;
      width: 240rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 44rpx;
      text-align: left;
    }
    .highlight {
      color: #1fe7e7;
    }
  }
  &_bottom {
    margin-top: 60rpx;
    height: 96rpx;
    display: flex;
    align-items: center;
    border-top: 2rpx solid #313535;
    &_item1 {
      flex: 1;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 96rpx;
    }
    &_item2 {
      border-left: 2rpx solid #313535;
      flex: 1;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #1fe7e7;
      line-height: 96rpx;
    }
  }
}
.buyStyle {
  color: #ff5757;
}
.sellStyle {
  color: #1fe7e7;
}

@keyframes rotateArround {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes rotateArround {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotateArround {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotateArround {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotateArround {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
.webView {
  position: fixed;
  z-index: 999;
  display: block;
  border: 0;
  height: 100vh;
  top: 0;
  width: 100%;
}
.cover_bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9998;
  // #ifdef H5
  height: 100vh;
  // #endif
  // #ifdef APP-PLUS
  height: 100vh;
  // #endif
  width: 750rpx;
  background: rgba($color: #000000, $alpha: 0.5);
}
.notice {
  position: fixed;
  top: 638rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding-top: 60rpx;
  width: 510rpx;
  // height: 354rpx;
  text-align: center;
  background: #292b2b;
  border-radius: 24rpx;
  // opacity: 0.98;
  &_row1 {
    // width: 128rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 44rpx;
    text-align: center;
  }
  &_row2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 26rpx auto 0;
    // width: 510rpx;
    // height: 160rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
    text-align: center;
    &_text {
      margin: 0 40rpx;

      // width: 32rpx;
      // height: 62rpx;
      font-size: 52rpx;
      font-weight: bold;
      color: #ffffff;
      // line-height: 62rpx;
    }
    &_input {
      margin: 0 20rpx;
      width: 180rpx;
      height: 62rpx;
      font-size: 52rpx;
      font-weight: bold;
      color: #ffffff;
      // line-height: 62rpx;
    }
  }
  &_icon {
    width: 50rpx;
    height: 50rpx;
  }
  &_row3 {
    margin-top: 24rpx;
    // width: 168rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #1fe7e7;
    line-height: 34rpx;
  }
  &_bottom {
    height: 96rpx;
    display: flex;
    align-items: center;
    margin-top: 18rpx;
    border-top: 2rpx solid #313535;
    &_item1 {
      flex: 1;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 96rpx;
    }
    &_item2 {
      border-left: 2rpx solid #313535;
      flex: 1;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #1fe7e7;
      line-height: 96rpx;
    }
    .shande {
      border-left: none;
    }
    .shande + .shande {
      border-left: 2rpx solid #313535;
    }
  }
}
</style>
